import { ref, reactive, onMounted, defineComponent } from 'vue'
import Qs from 'qs'
import { add, del, deleteByIds, update, getById, getList } from './${t.varName}.api.js'//引入API
import style from "./${t.varName}.module.css";//CSS
import AddComponent from './${t.varName}-add'
// 组件（生命周期钩子都写在这个组件中）
const Expose = defineComponent({
    setup() {
        onMounted(() => f5())
        return () => <Container />
    }
})

// 容器
const Container = () => {
    return (
        <>
            <div className={style.vueBox} style="'display: block;'">
                <div className={style.cPanel}>
                    <SearchForm></SearchForm>
                    <ViewSort></ViewSort>
                    <Shortcut></Shortcut>
                    <ViewTable></ViewTable>
                    <AddDialog></AddDialog>
                </div>
            </div>
        </>
    );
};

// 搜索表单
let searchForm = reactive({
    <#list t.getTallList() as c>
        ${c.fieldName}:'',
    </#list>
        page: 1,
        size: 10,
})
const SearchForm = () => {
    return (
        <>
            <div className={style.cTitle}>检索参数</div>
            <el-form inline={true}>
                <#list t.getTallList() as c>
                <el-form-item label="${c.columnComment3}">
                    <el-input v-model={searchForm.${c.fieldName}} />
                </el-form-item>
                </#list>

                <el-form-item>
                    <el-button type="primary" onClick={f5}>查询</el-button>
                </el-form-item>
            </el-form>
        </>
    );
};


//排序
const ViewSort = () => {
    return (
        <>
            <div className={style.cItem}>
                <label className={style.cLabel}>综合排序：</label>
                <el-radio-group v-model={searchForm.orderBy} size="small" onChange={f5}>
                <#list t.getTallList() as c>
                    <el-radio-button label="${c.fieldName}:asc" >${c.columnComment3}</el-radio-button>
                </#list>
                </el-radio-group>
            </div>
        </>
    );
};

// 快捷方式
let selects = []
const Shortcut = () => {
    // 批量删除
    function delByIds() {
        const ids = selects.map(item => item.id).join(",")
        deleteByIds(Qs.stringify({ ids })).then(res => {
            layer.msg('删除成功', { icon: 1 })
            selects.forEach(item => viewTable.tableDate.splice(viewTable.tableDate.indexOf(item), 1))
            // 如果全删除了，则刷新整个页面
            if (viewTable.tableDate.length === 0) {
                f5()
            }
        })

    }
    return (
        <>
            <div className={style.fastBtn}>
                <el-button icon={'plus'} type="primary" onClick={()=>dialogVisible.value = true}>新增</el-button>
                <el-button icon={'view'} type="success" onClick=""> 查看</el-button>
                <el-button icon={'delete'} type="danger" onClick={delByIds}>删除</el-button>
                <el-button icon={'download'} type="warning" onClick="">导出</el-button>
                <el-button icon={'refresh'} type="info" onClick=""> 重置</el-button>
            </div>
        </>
    );
};

// 展示表格
const viewTable = reactive({
    tableDate: [],
    total: 0,
})
const ViewTable = () => {
    // 插槽
    const slots = (s) => {
        return (
            <>
                <el-button size={'small'} icon={'view'} type="success" onClick="">查看</el-button>
                <el-button size={'small'} icon={'edit'} type="primary" onClick="">修改</el-button>
                <el-button size={'small'} icon={'delete'} type="danger" onClick={() => delById(s.row)}>删除</el-button>
                <el-button size={'small'} icon={'share'} type="warning" onClick="">分享</el-button>
            </>
        )
    }
    return (
        <>
            <el-table data={viewTable.tableDate} header-cell-style={{ backgroundColor: "#F5F5F5" }} onSelection-change={(dates)=>selects=dates}>
                <el-table-column type="selection" width="55" />
                <#list t.tallList as c>
                <el-table-column prop="${c.fieldName}" label="${c.columnComment3}" />
                </#list>
                <el-table-column label="操作" fixed="right" width="320" v-slots={slots} />
            </el-table>
            <div className={style.pageBox}>
                <el-pagination
                        v-model:currentPage={searchForm.page}
                        v-model:page-size={searchForm.size}
                        page-sizes={[3, 5, 10, 50, 100, 200, 300, 400]}
                        small={false}
                        background={true}
                        layout="total, sizes, prev, pager, next, jumper"
                        total={viewTable.total}
                        onSize-change={f5}
                        onCurrent-change={f5}
                />
            </div>
        </>
    );
};

// 刷新页面
function f5() {
    getList(Qs.stringify(searchForm)).then(response => {
        viewTable.tableDate = response.data
        viewTable.total = response.dataCount
    })
}
// 删除
function delById(row) {
    console.log(row.id);
    del(Qs.stringify({ id: row.id })).then(res => {
        layer.msg('删除成功', { icon: 1 })
        viewTable.tableDate.splice(viewTable.tableDate.indexOf(row), 1)
    })

}

//弹框
const dialogVisible = ref(false)
const AddDialog = () => {
    function handleClose() {
        ElMessageBox.confirm('Are you sure to close this dialog?')
            .then(() => {
                dialogVisible.value=false
            })
            .catch(() => {
                // catch error
            })
    }
    const slots = {
        footer: () => {
            return (
                <>
                    <span class="dialog-footer">
                        <el-button onClick={()=>dialogVisible.value = false}>Cancel</el-button>
                        <el-button type="primary" onClick={()=>dialogVisible.value = false}>Confirm</el-button>
                    </span>
                </>
            )
        }

    }
    return (
        <>
            <el-dialog
                    v-model={dialogVisible.value}
                    title="新增数据"
                    width="50%"
                    before-close={handleClose}
                    v-slots={slots}
            >
                <AddComponent></AddComponent>
            </el-dialog>
        </>
    )
}

export default Expose;
